<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 轴向
		X轴:从左往右;
		Y轴:从上往下;
		Z轴:从屏幕往外;
		判断旋转的方向:让轴向对着自己 顺时针方向;
		 */
		.box{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style: preserve-3d;
			/* 变形动画需要设置初始值 */
			transform:perspective(800px) rotateY(0deg);
			transform: all 500ms ease;
		}
		.box:hover{
			transform:perspective(800px) rotateY(45deg);
		}

		.box2{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:3px solid #000;
			margin:50px auto 0;
			transform-style: preserve-3d;
			/* 变形动画需要设置初始值 */
			transform:perspective(800px) rotateX(0deg);
			transform: all 500ms ease;
		}
		.box2:hover{
			transform:perspective(800px) rotateX(45deg);
		}

	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
</body>
</html>